<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>SkinGPT</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <style>
            #chatbot-response {
    background-color: #f8f9fa;
    color: #333;
    padding: 10px 20px;
    margin: 10px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    font-size: 16px;
    line-height: 1.5;
    overflow-y: auto;
    max-height: 150px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Soft shadow for depth */
    transition: all 0.3s ease-in-out;          /* Smooth transition for any change */
}

#chatbot-response:hover {
    background-color: #e9ecef;  /* Slightly darker background on hover */
}

            .chat-container {
                display: flex;
                flex-direction: column;
                height: 700px;  /* Use full height of the viewport */
                border: 1px solid #ccc;
                background-color: #f9f9f9;
                width: 500px;  /* Fixed width */
                margin: auto;
                padding: 20px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                overflow-y: auto;
                
            }

            #loading {
                position: fixed; /* or 'absolute' */
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 1000; /* high z-index to ensure it's on top */
            }

            .input-group {
                padding: 10px;

            }

            .input-group-text {
                background: none;
                border: none;
            }

            .upload-btn, .send-btn {
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .send-btn {
                background-color: #007BFF;  /* Matching the user message color */
                color: white;
                float: right;
            }



            .upload-btn {
                color: #007BFF;  /* Blue icon for uploading images */
            }

            .form-control {
                border: 2px solid #007BFF; /* Stylish border for the input */
                border-radius: 20px; /* Rounded input field */
            }

            .form-control:focus {
                box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
            }

            /* Add responsiveness to the chat container */
            @media (max-width: 600px) {
                .chat-container {
                    width: 100%;
                    height: 90vh;  /* Slightly less than full height for mobile */
                }
            }

        </style>
    </head>

<body>
    
    <div class="chat-container">
        <div id="chat-history" style="overflow-y: scroll;">
            <!-- Chat messages will be appended here -->
        </div>
        
        <div id="chatbot-response" style="margin-bottom: 100px; overflow-y: scroll;">
            <!-- Responses will be injected here -->
        </div>

        <div class="chat-input">
            <form id="query-form" method="POST" action="/query">
                <div class="input-group mb-3" >
                    <input type="text" class="form-control" id="query-input" name="query" placeholder="Type your message..." aria-label="Recipient's username" aria-describedby="button-addon2">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="submit" id="button-addon2">
                            <i class="fas fa-arrow-up"></i>
                        </button>
                    </div>
                </div>
            </form>
            
        </div>
    <div id="loading" style="display: none;">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
</div>
    

    
<!---
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('query-form');
            form.addEventListener('submit', async function(e) {
                e.preventDefault();
                const formData = new FormData(form);
                formData.append('context', "{{ context }}");  // Add context parameter
                const response = await fetch('/query', {
                    method: 'POST',
                    body: formData
                });
                const data = await response.json();
                const chatbotResponse = document.getElementById('chatbot-response');
                chatbotResponse.innerHTML = data.response;
                document.getElementById('query-input').value = ''; // Clear the input field
            });
        });
--->

<script>  
    
    document.addEventListener('DOMContentLoaded', function() {
    // Initialize chat with the context as the first message from the bot
    const initialContext = "{{ context }}";  // Ensure this is properly escaped if needed
    
    if (initialContext) {
        updateChatHistory('SkinGPT: ' + initialContext);
    }
    const form = document.getElementById('query-form');
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        const formData = new FormData(form);
        formData.append('context', "{{ context }}");  // Dynamically add the context parameter
        // Show loading icon
        document.getElementById('loading').style.display = 'block';

        const userQuery = document.getElementById('query-input').value;  // Get user input
        updateChatHistory('You: ' + userQuery);  // Display the user's query in the chat history

        try {
            const response = await fetch('/query', {
                method: 'POST',
                body: formData
            });
            document.getElementById('loading').style.display = 'none';
            if (!response.ok) {
                throw new Error('Network response was not ok: ' + response.statusText);
            }

            const data = await response.json();
            updateChatHistory('SkinGPT: ' + data.response);  // Display the server's response in the chat history

            document.getElementById('query-input').value = ''; // Clear the input field
        } catch (error) {
            console.error('Fetch error: ', error);
            updateChatHistory('Error: ' + error.message); // Display error in chat history
            document.getElementById('loading').style.display = 'none';
        }
    });

    function updateChatHistory(message) {
        const chatHistory = document.getElementById('chatbot-response');
        const messageElement = document.createElement('div');
        messageElement.innerHTML = `<p>${message}</p>`;
        chatHistory.appendChild(messageElement);
        chatHistory.scrollTop = chatHistory.scrollHeight;     // Auto-scroll to the newest message
    }
});

document.querySelector('.upload-btn').addEventListener('click', function() {
    document.getElementById('imageUpload').click();
});



</script>

</body>
</html>


